<!-- vue使用:响应式数据:ref(更推荐) -->
<!-- 1.导入ref
 2.ref支持简单类型和复杂类型,在代码中修改数据需要使用.value
 3.在ui中不需要 -->
<script setup lang="ts">
import { ref } from 'vue';
const num = ref(0);

const person = ref({
  name: '张三',
  age: 18,
  sex: '男'
})
const update = () => {
  person.value.name = '王五'
  person.value.age++
}
const foods = ref(['苹果', '香蕉', '橘子'])
const changFoods = () => {
  foods.value.push('草莓')
}
const addFood = () => {
  foods.value.unshift('芒果')
}




</script>

<template>
  <div @click="num++">{{ num }}</div>
  <div @click="update">{{ person }}</div>
  <div @click="changFoods">{{ foods }}</div>
  <button @click="addFood">修改数据</button>


</template>

<style scoped></style>
